import React from "react";
import Header from "./component/Header";
import "./style/style.less";
import { apiGetOrderMoneyChart } from '@/request/dataStatics'
import _ from 'lodash'
import LineChart from "./component/LineChart";

class Amount extends React.Component {
  state = {
    lineXData: [],
    lineYData: [],
    searchValue: {
      type: 'day'
    }
  }
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    this.setState({
      lineXData: [],
      lineYData: []
    })
    const { searchValue } = this.state
    let res = await apiGetOrderMoneyChart({ ...searchValue })
    if (res.data && res.code === 0) {
      let lineXData = _.keys(res.data.bar)
      let lineYData = _.values(res.data.bar).map(v => {
        return v.sum
      })
      this.setState({
        lineXData,
        lineYData
      })
    }
  }
  getTime = (type, createStartTime, createEndTime) => {
    if (type === 'condition') {
      this.setState({
        searchValue: {
          type: 'condition',
          createStartTime,
          createEndTime
        }
      }, () => this.getData())
    } else {
      this.setState({
        searchValue: {
          type
        }
      }, () => this.getData())
    }
  };
  render() {
    const { lineXData, lineYData } = this.state
    return <div className="p-layout-box">
      <Header getTime={this.getTime} />
      <div className="p-layout-content">
        <div className="chart-box">
          {!_.isEmpty(lineXData) && !_.isEmpty(lineYData) && <LineChart name="订单金额" lineXData={lineXData} lineYData={lineYData} />}
        </div>
      </div>
    </div>
  }
}

export default Amount;
